<template>
  <mu-row>
    <div v-if="filename !== ''" class="w100 padl5">
      {{filename}}
    </div>
    <div>
      <input style="display: none" type="file" ref="fileInput" @change="upload(name)">
      <mu-button @click="selectPic(name)" color="primary">
        选择
        <mu-icon right value="cloud_upload"></mu-icon>
      </mu-button>
    </div>
  </mu-row>
</template>

<script>
import api from '@/assets/js/api'

export default {
  name: "file",
  props: {
    name: '',
    value: ''
  },
  data () {
    return {
      viewPic: "",
      filename: ""
    }
  },
  mounted () {
    this.viewPic = api.getUrl() + this.value
  },
  methods: {
    selectPic (refName) {
      console.log(this.$refs.fileInput)
      this.$refs.fileInput.dispatchEvent(new MouseEvent("click"))
    },
    upload (refName) {
      let _this = this
      let files = this.$refs.fileInput.files
      console.log(files)
      api.upload(files[0], function (res) {
        console.log(res)
        _this.filename = res.i
        if (res.s * 1 === 1) {
          _this.viewPic = api.getUrl() + res.d
          console.log(res)
          _this.$emit('change', {
            name:res.i,
            file:res.d
          })
        }
      }, true)
    }

  }
}
</script>

<style scoped>

</style>
